<!DOCTYPE html>
<html>

<head>
    <!-- 有一个父div，宽度是100%，父div下面有3个子div，等宽，平分父div宽度 -->
    <meta charset="utf-8">
    <title>flex圣杯布局</title>
    <style>
        body{
            margin: 0;
        }
        .HolyGrail {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        header,
        footer {
            height: 100px;
            background-color: aquamarine;
        }

        .HolyGrail-body {
            display: flex;
            flex: 1;
            background-color: bisque;
        }

        .HolyGrail-content {
            flex: 1;
        }

        .HolyGrail-nav,
        .HolyGrail-ads {
            /* 两个边栏的宽度设为12em */
            flex: 0 0 12em;
            background-color: coral;
        }

        .HolyGrail-nav {
            /* 导航放到最左边 */
            order: -1;
        }
    </style>
</head>

<body class="HolyGrail">
    <header>header</header>
    <div class="HolyGrail-body">
        <main class="HolyGrail-content">main</main>
        <nav class="HolyGrail-nav">nav</nav>
        <aside class="HolyGrail-ads">aside</aside>
    </div>
    <footer>footer</footer>
</body>

</html>